<template>
  <div>
    <div style="margin-top: 10px">
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane label="我的任务" name="myTasks">
          <el-table
            :data="tasks"
            stripe
            border
            style="width: 100%"
            v-loading="loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading">
            <el-table-column
              type="selection"
              width="40">
            </el-table-column>
            <el-table-column
              prop="id"
              label="ID"
              width="50">
            </el-table-column>
            <el-table-column
              prop="title"
              label="任务标题"
              width="150">
            </el-table-column>
            <el-table-column
              prop="content"
              label="任务内容">
            </el-table-column>
            <el-table-column
              label="发布者"
              width="80">
              <template slot-scope="scope">
                <div>{{ scope.row.hr ? scope.row.hr.name : '无' }}</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="创建时间"
              width="160">
            </el-table-column>
            <el-table-column
              prop="endTime"
              label="截止时间"
              width="160">
            </el-table-column>
            <el-table-column
              label="状态"
              width="100">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.status === '未分配'" type="info">{{ scope.row.status }}</el-tag>
                <el-tag v-else-if="scope.row.status === '进行中'" type="primary">{{ scope.row.status }}</el-tag>
                <el-tag v-else-if="scope.row.status === '已完成'" type="success">{{ scope.row.status }}</el-tag>
                <el-tag v-else-if="scope.row.status === '已取消'" type="danger">{{ scope.row.status }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="150">
              <template slot-scope="scope">
                <el-button
                  v-if="scope.row.status === '未分配'"
                  size="mini"
                  type="primary"
                  @click="confirmTask(scope.row)">确认接收</el-button>
                <el-button
                  v-if="scope.row.status === '进行中'"
                  size="mini"
                  type="success"
                  @click="completeTask(scope.row)">完成任务</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        
        <el-tab-pane label="我发布的任务" name="publishedTasks" v-if="isManagerOrAbove">
          <el-table
            :data="publishedTasks"
            stripe
            border
            style="width: 100%"
            v-loading="loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading">
            <el-table-column
              type="selection"
              width="40">
            </el-table-column>
            <el-table-column
              prop="id"
              label="ID"
              width="50">
            </el-table-column>
            <el-table-column
              prop="title"
              label="任务标题"
              width="150">
            </el-table-column>
            <el-table-column
              prop="content"
              label="任务内容">
            </el-table-column>
            <el-table-column
              label="指派员工"
              width="120">
              <template slot-scope="scope">
                <div>{{ scope.row.employee ? scope.row.employee.name + '(' + scope.row.employee.workID + ')' : '无' }}</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="创建时间"
              width="160">
            </el-table-column>
            <el-table-column
              prop="endTime"
              label="截止时间"
              width="160">
            </el-table-column>
            <el-table-column
              label="状态"
              width="100">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.status === '未分配'" type="info">{{ scope.row.status }}</el-tag>
                <el-tag v-else-if="scope.row.status === '进行中'" type="primary">{{ scope.row.status }}</el-tag>
                <el-tag v-else-if="scope.row.status === '已完成'" type="success">{{ scope.row.status }}</el-tag>
                <el-tag v-else-if="scope.row.status === '已取消'" type="danger">{{ scope.row.status }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="150">
              <template slot-scope="scope">
                <el-button
                  v-if="scope.row.status === '进行中'"
                  size="mini"
                  type="success"
                  @click="confirmTaskCompletion(scope.row)">确认完成</el-button>
                <el-button
                  v-if="scope.row.status === '未分配' || scope.row.status === '进行中'"
                  size="mini"
                  type="danger"
                  @click="cancelTask(scope.row)">取消任务</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      
      <div style="display: flex;justify-content: flex-end;margin-top: 10px">
        <el-pagination
          background
          layout="sizes, prev, pager, next, jumper, ->, total"
          :total="total"
          :page-size="size"
          :current-page.sync="page"
          @current-change="loadByActiveTab"
          @size-change="sizeChange">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "EmployeeTask",
  data() {
    return {
      activeTab: 'myTasks',
      loading: false,
      tasks: [],
      publishedTasks: [],
      total: 0,
      page: 1,
      size: 10,
      isManagerOrAbove: false
    }
  },
  mounted() {
    this.initMyTasks();
    this.checkUserRole();
  },
  methods: {
    // 初始化我的任务
    initMyTasks() {
      this.loading = true;
      this.getRequest("/task/basic/emp?page=" + this.page + "&size=" + this.size).then(resp => {
        this.loading = false;
        if (resp) {
          this.tasks = resp.data;
          this.total = resp.total;
        }
      });
    },
    
    // 初始化我发布的任务
    initPublishedTasks() {
      this.loading = true;
      this.getRequest("/task/basic/hr?page=" + this.page + "&size=" + this.size).then(resp => {
        this.loading = false;
        if (resp) {
          this.publishedTasks = resp.data;
          this.total = resp.total;
        }
      });
    },
    
    // 检查用户角色（是否有发布任务权限）
    checkUserRole() {
      // 从store获取用户角色信息，通常store中会保存当前用户信息
      // 这里假设roles字段包含了用户的角色列表
      let roles = this.$store.state.user.roles;
      if (roles) {
        // 检查是否包含"主管"、"经理"、"总监"等角色之一
        let managerRoles = ["ROLE_manager", "ROLE_director", "ROLE_admin"];
        this.isManagerOrAbove = roles.some(role => managerRoles.includes(role.name));
      }
    },
    
    // 页面大小改变
    sizeChange(size) {
      this.size = size;
      this.page = 1;
      this.loadByActiveTab();
    },
    
    // 根据当前活动标签加载数据
    loadByActiveTab() {
      if (this.activeTab === 'myTasks') {
        this.initMyTasks();
      } else if (this.activeTab === 'publishedTasks') {
        this.initPublishedTasks();
      }
    },
    
    // 处理标签点击事件
    handleTabClick() {
      this.page = 1;
      this.loadByActiveTab();
    },
    
    // 确认接收任务
    confirmTask(data) {
      this.$confirm('确认接收该任务吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        this.putRequest("/task/basic/confirm/" + data.id).then(resp => {
          if (resp) {
            this.initMyTasks();
            this.$message.success("已确认接收任务!");
          }
        });
      }).catch(() => {
        this.$message.info("已取消操作");
      });
    },
    
    // 完成任务
    completeTask(data) {
      this.$confirm('确认已完成该任务吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        this.putRequest("/task/basic/complete/" + data.id).then(resp => {
          if (resp) {
            this.initMyTasks();
            this.$message.success("已提交任务完成!");
          }
        });
      }).catch(() => {
        this.$message.info("已取消操作");
      });
    },
    
    // 确认任务完成
    confirmTaskCompletion(data) {
      this.$confirm('确认该任务已完成吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        this.putRequest("/task/basic/confirm-completion/" + data.id).then(resp => {
          if (resp) {
            this.initPublishedTasks();
            this.$message.success("已确认任务完成!");
          }
        });
      }).catch(() => {
        this.$message.info("已取消操作");
      });
    },
    
    // 取消任务
    cancelTask(data) {
      this.$confirm('确认取消该任务吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.putRequest("/task/basic/cancel/" + data.id).then(resp => {
          if (resp) {
            this.initPublishedTasks();
            this.$message.success("已取消任务!");
          }
        });
      }).catch(() => {
        this.$message.info("已取消操作");
      });
    }
  }
}
</script>

<style scoped>

</style> 